<template>
  <div id='pay'>
    <u-head :title=tit></u-head>
    <div class="box">
        <span class="dingdanhao">{{'订单号:1111111111111111'}}</span>
        <p class="price">{{money}}</p>
    </div>
    <div class="box1">
        <p>请选择支付方式</p>
        <div class="box2">
            <img src="../assets/images/zhifubao.jpg" alt="">
            <span class="box3">支付宝支付</span>
            <input type="radio" name="zhifu">
        </div>
        <div class="box2">
            <img src="../assets/images/weixin.jpg" alt="">
            <span class="box3">微信支付</span>
            <input type="radio" name="zhifu">
        </div>
    </div>
    <van-button @click="pay" class="payBtn" round type="info">确定支付</van-button>
  </div>
</template>
<script>
import uHead from "../components/public/uHead.vue"
export default {
    components:{
        uHead
    },
    data(){
        return {
            tit: '支付页面',
            money: ''
        }
    },
    computed:{

    },
    mounted(){
        this.money=this.$route.query.money
    },
    methods:{
        pay(){
            alert('支付成功')
        }
    }
}
</script>
<style scoped>
#pay{
    max-width: 7.5rem;
}
.dingdanhao{
    display: inline-block;
    margin-top: 0.3rem;
}
.box{
    text-align: center;
    margin-bottom: 0.3rem;
}
.price{
    font-size: 0.4rem;
}
.box1{
    width: 80%;
    margin-left: 10%;
    display: flex;
    flex-direction: column;
    height: 2.5rem;
    justify-content: space-evenly;
}
.box1 img{
    background: transparent;
    width: 30px;
    height: 30px;
}
.box2{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
.box3{
    margin-left: -1.2rem;
}
.payBtn{
    margin-top: 1.5rem;
    margin-left: 10%;
    width: 80%;
}
</style>